<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加临时性收费</title>
    <!-- 引入layui 样式-->
    <link rel="stylesheet" href="../../static/layer/css/layui.css"/>
    <link rel="stylesheet" href="../../static/css/font-awesome.min.css">
    <style type="text/css">
        .zhangdan-jiben-info {
            width: 100%;
            margin-bottom: 20px;
            padding: 30px 30px;
            box-sizing: border-box;
            background-color: #ffffff;
        }

        .bill-box {
            padding: 15px 0;
            border-bottom: 1px dashed #e6eef6;
        }

        .tab-body {
            background-color: #f4f4f4;
            padding: 20px;
            margin-bottom: 50px;
        }

        .operate-button-group {
            width: 100%;
            position: fixed;
            margin: 0;
            bottom: 0;
            left: 0;
            text-align: center;
            background-color: #ffffff;
            border-top: 1px solid #f4f4f4;
            z-index: 2;
        }

        .blockquote-bottom {
            width: 100%;
            position: fixed;
            margin: 0;
            bottom: 0;
            left: 0;
            text-align: center;
            background-color: #ffffff;
            border-top: 1px solid #f4f4f4;
            z-index: 2;
        }

        .blockquote-bottom-item {
            margin: 15px 0;
        }

        .room-select {
            width: 500px;
        }

        .room-select2 {
            width: 150px;
        }

        .room-select-box-container {
            position: absolute;
            top: 50px;
            display: none;
            padding: 5px 0;
            z-index: 999;
            min-width: 100%;
            border: 1px solid #d2d2d2;
            max-height: 300px;
            overflow-y: auto;
            background-color: #fff;
            border-radius: 2px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
            box-sizing: border-box;
        }

        .room-select-box-container2 {
            position: absolute;
            top: 50px;
            display: none;
            padding: 5px 0;
            z-index: 999;
            min-width: 100%;
            border: 1px solid #d2d2d2;
            max-height: 300px;
            overflow-y: auto;
            background-color: #fff;
            border-radius: 2px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
            box-sizing: border-box;
        }

        .displayflex {
            display: flex;
        }

        .box-container {
            width: 120px;
            height: 200px;

            display: inline-block;
            vertical-align: top;
            list-style: none;
            margin: 0;
            padding: 0;
            border-right: 1px solid #e9e9e9;
            overflow: auto;
        }

        .business-box-container {

        }

        .building-box-container {
            display: none;
        }

        .unit-box-container {
            display: none;
        }

        .floor-box-container {
            display: none;
        }

        .room-box-container {
            display: none;
        }

        .room-box {
            margin-left: 30px;
            padding: 15px 0;
            border-bottom: 1px dashed #e6eef6;
        }

        .layui-input-extra-content .layui-form-select dl {
            top: 32px;
        }

        .layui-input-extra-content .layui-input-inline > input {
            height: 25px;
            position: relative;
            z-index: 2;
            padding-left: 5px;
            background-color: transparent;
        }

        .box-container dd {
            cursor: pointer;
            padding: 0 10px;
            line-height: 36px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .box-container dd:hover {
            background-color: #f2f2f2;
        }

        .box-container dd.layui-this {
            background-color: #5FB878;
            color: #fff;
        }

        .choose-room {
            cursor: pointer;
        }

        .label-money {
            position: absolute;
            top: 10px;
            right: 5px;
            font-size: 14px;
            color: #c5d0da;
        }

        .label-card {
            position: absolute;
            top: 10px;
            left: 50px;
            font-size: 14px;
            color: #c5d0da;
        }

        .bill-add > span > span {
            color: #009688;
            font-size: 16px;
            text-decoration: underline #009688;
            vertical-align: middle;
        }

        .bill-add > span:hover {
            opacity: 0.8;
            cursor: pointer;
        }

        .fa-plus-circle {
            vertical-align: middle;
            margin-left: 10px;
            font-size: 25px;
            color: #009688;
        }

        .fa-times-circle {
            vertical-align: middle;
            margin-left: 10px;
            font-size: 25px;
            color: #009688;
        }

        .layui-col-xskssj {
            width: 12.5%;
            float: left;
        }

        .layui-col-xsjssj {
            width: 12.5%;
            float: left;
        }

    </style>
</head>
<body>
<form class="layui-form">
    <div class="layui-tab-content">
        <div class="tab-body">
            <div class="bill-box">

                <div class="zhangdan-jiben-info">
                    <div class="bill-box">
                        <div class="zhangdan-jiben-info">
                            <div class="layui-bill"></div>
                        </div>
                    </div>

                    <div class="zhangdan-jiben-info">
                        <div class="quote-title">
                            <i class="fa fa-circle-o" aria-hidden="true"></i>
                            <span>附件：</span>
                        </div>
                        <div class="other-info-box">
                            <div class="attachment-info-box">
                                <!--<div class="attachment-administer">
                                <span>
                                    <i class="fa fa-cloud-upload" aria-hidden="true"></i>
                                    <span id="upload">上传附件</span>
                                    <div class="layui-upload-list" id="imgList"></div>
                                </span>
                                </div>-->
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件
                                    </button>
                                    <div class="layui-upload-list">
                                        <table class="layui-table">
                                            <thead>
                                            <tr>
                                                <th>缩略图</th>
                                                <th>文件名</th>
                                                <th>大小</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody id="demoList"></tbody>
                                        </table>
                                    </div>
                                    <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bill-box">
                        <div class="zhangdan-jiben-info">
                            <div class="layui-row">
                                <div class="layui-col-xs6">
                                    备注信息
                                </div>
                            </div>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入内容" name="INFO" class="layui-textarea"></textarea>
                            </div>
                            <hr>
                            <input type="hidden" class="layui-input" name="STATE"
                                   value="682177ade393478e8224f9a3aa385a6c">
                            <div class="layui-form-item blockquote-bottom">
                                <div class="blockquote-bottom-item">
                                    <button class="layui-btn layui-btn-small" lay-submit="" lay-filter="interimAdd">添加
                                    </button>
                                    <button type="reset" class="layui-btn-small layui-btn-primary cancel">重置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<script type="text/javascript" src="../../static/layer/layui.js"></script>
<script type="text/javascript" src="../../static/js/common/dateUtils.js"></script>
<script type="text/javascript" src="../../static/js/common/queryUtils.js"></script>
<script type="text/javascript" src="../../static/ujs/depot/depot_interim_add.js"></script>


</body>
</html>